<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>quanxuan</title>
    <script type="text/javascript">
        function all() {
            alert(111);
            var a = document.getElementById("box1");
            var ar = document.getElementsByName("box");
            if(a.checked == true){
                for(var i = 0; i < ar.length; i++ ){
                    ar[i].checked = true;
                }
            }else{
                for(var i = 0; i < ar.length; i++ ){
                    ar[i].checked = false;
                }
            }
        }
    </script>
    <style>
        *{
            margin: 0;
        }
        div.host{
            background-image: url("images/list_bg.gif");
            background-repeat: no-repeat;
            position: relative;;
        }
        li{
            list-style: none;
            position: relative;
            left: -20px;
            border-bottom: 2px dashed gray;
            width: 710px;
        }
        li#li0{
            top: 40px;
            height: 30px;
            font-weight: bold;
        }
        li#li1{
            top: 50px;
            height: 120px;
        }
        li#li2{
            top: 60px;
            height: 103px;
        }
        li#li3{
            top: 70px;
            height: 118px;
        }
        li#li4{
            top: 80px;
            height: 92px;
        }
        .product{
            position: relative;
            left: 70px;
        }
        .name{
            position: relative;
            left: 220px;

            width: 280px;
        }
        .price{
            position: relative;
            left: 320px;

        }
        div.name{
            top: -100px;
            left: 300px;
            text-align: center;
        }
        div.price{
            left: 620px;
           top: -170px;
        }
        input.box{
            position: relative;
            bottom: 50px;
        }

    </style>
</head>
<body>
<input type="button"  value="aaa" onclick="all()">
<div class="host">
    <ul>
        <li id="li0">
            <div><input type="checkbox" id="box1" onclick="all()" />全选<a class="product">商品图片</a>
                <a class="name">商品名称/出售者/联系方式</a>
                <a class="price">价格</a>
            </div>
        </li>
        <li id="li1">
            <div><input type="checkbox" class="box" name="box"/><img src="images/list0.jpg" class="product">
                <div class="name">杜比环绕音,家庭影院必备，超真实享受<br/>出售者：ling112233<br/>
                <img src="images/online_pic.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/list_tool_fav1.gif">收藏
                </div>
                <div class="price">一口价<br/><br/>2833.0</div>
            </div>
        </li>
        <li id="li2">
            <div><input type="checkbox" class="box" name="box"/><img src="images/list1.jpg" class="product">
                <div class="name">NVDIA 99999GT 512MB 256BIT极品显卡，不容错过<br/>出售者：aipiaopiao110<br/>
                    <img src="images/online_pic.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/list_tool_fav1.gif">收藏
                </div>
                <div class="price">一口价<br/><br/>6464.0</div>
            </div>
        </li>
        <li id="li3">
            <div><input type="checkbox" class="box" name="box"/><img src="images/list2.jpg" class="product">
                <div class="name">精品热卖：高清晰，30寸等离子电视<br/>出售者：阳光的挣扎<br/>
                    <img src="images/online_pic.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/list_tool_fav1.gif">收藏
                </div>
                <div class="price">一口价<br/><br/>18888.0</div>
            </div>
        </li>
        <li id="li4">
            <div><input type="checkbox" class="box" name="box"/><img src="images/list3.jpg" class="product">
                <div class="name">Sony索尼家用最新款笔记本<br/>出售者：疯狂的镜无<br/>
                    <img src="images/online_pic.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/list_tool_fav1.gif">收藏
                </div>
                <div class="price">一口价<br/><br/>5889.0</div>
            </div>
        </li>
    </ul>
</div>

</body>
</html>